<template>
	<div class="addBank">
		<div class="input">
			<label>原交易密码</label>
			<input type="password" v-model="passwordOld" maxlength="11" placeholder="原交易密码" />
		</div>
		<div class="input">
			<label>新交易密码</label>
			<input type="password" v-model="password" maxlength="11" placeholder="原交易密码" />
		</div>
		<div class="input">
			<label>再次输入</label>
			<input type="password" v-model="passwordTwo" maxlength="18" placeholder="新交易密码" />
		</div>
		<div class="phone">
			<div class="phone_left">
				<label for="">手机号</label>
				<span>{{mobile}}</span>
			</div>
			<div class="btn_con">
				<button v-text="smsBtn" @click="e_send" :disabled="isDisable"></button>
			</div>
		</div>
		<div class="code">
			<div class="phone_left">
				<label for="">验证码</label>
				<input type="text" placeholder="请输入验证码" placeholder-style="font-size:25rpx; padding-left: 20rpx;letter-spacing:5rpx;" v-model="phoneCode">
			</div>
		</div>
		<div class="btn">
			<button @click="visable">确定</button>
		</div>
	</div>
</template>

<script>
import {RegExpr} from '@/utils/regex'
export default {
	data() {
		return {
			password: '',
			passwordOld: '',
			passwordTwo: '',
			sendphone: '',
			mobile: '', //手机号
			smsBtn: '发送验证码',
			smdTimer: null, //发送验证码定时器,
			phoneCode: '', //短信验证码
			isDisable: false, //防止重复点击
		}
	},
	onLoad() {
		let mobilePhone = wx.getStorageSync('userPhone')
		this.sendphone = mobilePhone
		var phoneRe = mobilePhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
		this.mobile = phoneRe
	},
	methods: {
		//提交密码设置
		setPassword() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/updateTradePassword',
				method: 'post',
				data: {
					newPassword: this.password,
					oldPassword: this.passwordOld,
					phone: this.sendphone,
					phoneCode: this.phoneCode,
					userId: userId,
					fl: 1,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
				if (re.status == -1) {
					console.log('你为啥不进来')
					wx.showToast({
						title: re.msg,
						image: '../../static/images/gantanhao.png',
					})
				}
				if (re.status == 0) {
					wx.showToast({
						title: '修改成功',
					})
					;(this.password = ''), (this.passwordTwo = ''), (this.sendphone = '')
					this.phoneCode = ''
				}
			})
		},
		visable() {
			let reg = /^\d{6}$/
			if (!reg.test(this.password)) {
				wx.showToast({
					title: '6位数字密码',
					image: '../../static/images/gantanhao.png',
				})
			}
			if (!reg.test(this.passwordOld)) {
				wx.showToast({
					title: '请输入原密码',
					image: '../../static/images/gantanhao.png',
				})
			}
			if (!reg.test(this.passwordTwo)) {
				wx.showToast({
					title: '6位数字密码',
					image: '../../static/images/gantanhao.png',
				})
			}
			if (!this.password) {
				wx.showToast({
					title: '密码不能为空',
					image: '../../static/images/gantanhao.png',
				})
			}
			if (!this.passwordTwo) {
				wx.showToast({
					title: '密码不能为空',
					image: '../../static/images/gantanhao.png',
				})
			}
			if (this.password != this.passwordTwo) {
				wx.showToast({
					title: '密码不一致',
					image: '../../static/images/gantanhao.png',
				})
			}
			this.setPassword()
		},
		e_send() {
			this.smsTimer()
			this.send()
		},

		// 发送倒计时
		smsTimer() {
			this.smsBtn = '60s'
			var counter = 59
			this.smdTimer = setInterval(() => {
				if (counter == 0) {
					this.isDisable = false
					this.smsBtn = '发送验证码'
					clearInterval(this.smdTimer)
				} else {
					this.isDisable = true
					this.smsBtn = counter + 's'
					counter--
				}
			}, 1000)
		},
		//发送
		send() {
			let that = this
			wx.request({
				url: 'http://192.168.2.125:8200/api/sendValidateCode',
				header: {'content-type': 'application/x-www-form-urlencoded'},
				data: {
					phoneNum: this.sendphone,
				},
				method: 'POST',
				success(res) {
					console.log('cc', res.data)
					if (!res.data) {
						wx.showToast({
							title: '发送失败',
							image: '../../static/images/gantanhao.png',
						})
						clearInterval(that.smdTimer)
						that.smsBtn = '发送验证码'
					} else {
						wx.showToast({
							title: '发送成功',
							image: '/static/images/success.png',
						})
					}
				},
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.addBank {
	width: 100%;
	.input {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		background: #fff;
		line-height: 60rpx;
		padding: 20rpx;
		&:nth-child(1) {
			margin-top: 20rpx;
		}
		&:nth-child(2) {
			margin-top: 15rpx;
		}
		&:nth-child(3) {
			margin-top: 15rpx;
		}
		label {
			font-size: 13px;
			color: #323232;
			font-weight: 500;
		}
		input {
			font-size: 13px;
			padding-top: 15rpx;
			text-align: right;
		}
		input:placeholder {
			font-size: 13px;
		}
	}
	.phone {
		border-bottom: 2rpx solid #f0f4f3;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		margin-top: 7px;

		.phone_left {
			label {
				font-size: 25rpx;
				padding: 20rpx;
			}
			span {
				font-size: 25rpx;
			}
		}
		.btn_con {
			height: 60rpx;
			outline: 0;
			button {
				height: 60rpx;
				width: 180rpx;
				line-height: 60rpx;
				font-size: 20rpx;
			}
		}
	}
	.code {
		.phone_left {
			border-bottom: 1px solid #f0f4f3;
			align-items: center;
			height: 50px;
			display: flex;
			background: #fff;
			margin-top: 7px;
			label {
				font-size: 25rpx;
				padding: 20rpx;
			}
			input {
				padding-left: 20rpx;
			}
		}
	}
	.btn {
		width: 100%;
		button {
			width: 90%;
			margin: auto;
			margin-top: 20px;
			background: #ffd161;
		}
	}
}
</style>

